﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../fly/fly.js" type="text/javascript"></script>
    <script src="../../fly.ui.js" type="text/javascript"></script>
    <script src="../../plugins/grid/grid.js" type="text/javascript"></script>
    <script src="../../plugins/pager/pager.js" type="text/javascript"></script>
    <link href="../../plugins/themes/blue/fly-base.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/button.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/grid.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/toolbar.css" rel="stylesheet" type="text/css" />
    <link href="../../plugins/themes/blue/pager.css" rel="stylesheet" type="text/css" />
    <script>
        $(function () {

            //create store
            var store = new $.data.AjaxStore({
                url: "data.json.page{pageIndex}.txt?id={0}&name={name}",
                method: "get",
                recordsProperty: 'rows',
                totalProperty: 'recordCount',
                remoteSort: true,
                params: {
                    p1: "{1}",
                    p2: 3
                }
            });

            store.onRequested(function (data, option) {
                data.rows[parseInt(Math.random() * 10)].leaf = false
                data.rows[parseInt(Math.random() * 10)].leaf = false

            });


            //create grid
            var panel = new $.ui.grid.GridPanel({
                id: 'panel',
                store: store,
                altRowBy: 3,
                height:300,
                plugins: new $.ui.grid.plugins.TreeGrid({
                    sm: {
                        parentCascade: false,
                        childCascade: false
                    }
                }),
                columns: [
                new $.ui.grid.RowNumberer({
                    format: "{0}.",
                    width: 150
                }),
                new $.ui.grid.CheckboxSelectionModel(),
                {
                    dataIndex: 0,
                    width: 40
                },
                {
                    dataIndex: 1
                }, 2, 3, 4],

                listeners: {
                    init: function () {

                        if (this.ownerNode) {
                            this.domFrame = { body: ["tbar", "table"] }
                            this.tbar = new $.ui.Pager({
                                hiddenOnOnePage: true,
                                //css: "f-pager-pageList-button-rect",
                                currentType: $.ui.Pager.currentTypes.pageList,
                                showNext: false,
                                showPrevious: false,
                                showButtonText: false,
                                showLast: false,
                                showFirst: false,
                                showRefresh: false,
                                "show->": false, 
                                showInfo: false
                            });
                        }
                        else {
                            this.bbar = new $.ui.Pager({
                                //css: "f-pager-pageList-button-rect",
                                currentType: $.ui.Pager.currentTypes.pageList,
                                showNext: false,
                                showPrevious: false,
                                showButtonText: true
                                //, showInfo: false
                            });
                        }
                    }
                }
            })
            panel.render(".grid-container2")
        })

    </script>
    <style>
        body
        {
            background-image: url(../../plugins/themes/images/bgs.png);
            background-repeat: repeat-x;
            background-position: cen r bottom;
            height: 1000px;
            color: #222222;
            font-size: 12px;
            font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
        }
       
    </style>


</head>
<body>

    <div class="grid-container">
        <div class="grid-container2">
        </div>
    </div>
</body>
</html>
